import React from "react";
import { observable, toJS } from "mobx";
import { observer } from "mobx-react";
import { Spin } from "antd";
import loadjs from "loadjs";

@observer
export default class DataBoardWidget extends React.Component {
    @observable loaded = false;

    constructor(props) {
        super();
        this.loadEdcBoard();
    }

    loadEdcBoard() {
        if (loadjs.isDefined('weaEdcBoard')) {
            this.loaded = true;
            return;
        }

        const libUrl = '/spa/edc/static4engine/board4com/';
        loadjs([
            `${libUrl}index.css`,
            `${libUrl}index.js`,
            '/font/edc/board/iconfont.js',
            '/mobilemode/js/echarts4/echarts.min.js'
        ], 'weaEdcBoard', {
            success: () => {
                this.loaded = true;
            }
        });
    }

    render() {
        const { loaded } = this;

        if (!loaded) {
            return (
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@rtkmvs`} spining={!loaded} style={{ width: '100%', paddingTop: 200 }} />
            );
        }

        const { DataBoardWidget } = window.weaEdcBoard.com;

        return (
            <div className='wea-edc-board-container'>
                <DataBoardWidget ecId={`${this && this.props && this.props.ecId || ''}_DataBoardWidget@2tcr98`} rightslide={false} fixed={true} />
            </div>
        );
    }
}